<script setup lang="ts">
import { useLoginStore } from '@/stores/login'
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'


const router = useRouter()
const loginStore = useLoginStore()


onMounted(() =>{
    const user = sessionStorage.getItem('user')
    if(user!== null){
        sessionStorage.removeItem('user')
    }
    const friend = sessionStorage.getItem('friend')
    if(friend!== null){
        sessionStorage.removeItem('friend')
    }
    loginStore.phone = ''    
    loginStore.password = ''
})

function judge(){
    loginStore.login()
}


</script>

<template>

    <div id="overall">
    <el-card style="width: 20vw; margin:15% 40%;">
      <template #header>
        <div class="card-header" style="text-align: center; font-size:30px;">
          <span >登录</span>
        </div>
      </template>
      <div style="padding-bottom:20px">
        <span>手机号:</span>
        <el-input v-model="loginStore.phone" style="width: 16vw" placeholder="请输入手机号" />
      </div>
      <div>
        <span>密码:</span>
        <el-input v-model="loginStore.password" style="width: 16vw" type="password" placeholder="请输入密码" show-password/>
        </div>
      <template #footer>
        <el-button type="primary" link>忘记密码</el-button>
        <el-button type="success" @click="judge" style="height:40px;width:70px; margin-left:13%; color:white; font-size:20px">登录</el-button>
        <el-button type="" @click="router.push('/enrollInterface')" style="margin-left:15%;margin-top:1%; font-size:16px"  link>注册</el-button>
    </template>
    </el-card>
</div>
  </template>
  

<style>

#overall{
    display: flex; 
    justify-content: 
    center; align-items: 
    center;
     height: 100vh;
    /* background-color:rgb(136, 237, 125); */
    background-image: linear-gradient(to bottom  ,rgb(105, 225, 105),rgb(136, 237, 125) 
    , rgb(225, 236, 226), rgb(225, 236, 226));
}
    
</style>